import NavMenu from '@/components/NavMenu';
import { useMemo, useState } from 'react';
import type { FC } from 'react';
import { connect } from 'react-redux';
import styles from './index.module.less';
import ItemWrapper from '@/components/ItemWrapper';

const Todo: FC<Todo.Props> = (props) => {
  const { menuItems, todoItems } = props;
  const [activeState, setActiveState] = useState<Todo.ActiveState>({
    id: menuItems[0]?.id ?? -1,
    themeColor: '#005fb8',
    title: ''
  });
  const currentGroupItems = useMemo(() => {
    return todoItems.filter((item) => item.groupId === activeState.id);
  }, [activeState.id]);
  return (
    <div className={styles.container}>
      <NavMenu flat items={menuItems} activeId={activeState.id} onActiveIdChange={setActiveState} />
      <div className={styles.rightContainer} style={{ backgroundColor: activeState.themeColor }}>
        <div className={styles.title}>{activeState.title}</div>
        <div className={styles.itemContainer}>
          {currentGroupItems.map((item) => (
            <ItemWrapper key={item.id}>{item.content}</ItemWrapper>
          ))}
        </div>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  menuItems: state.menu.menuItems,
  todoItems: state.todo.todoItems
});

const mapDispatchToProps = () => ({});

export default connect(mapStateToProps, mapDispatchToProps)(Todo);
